<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字案例</title>
</head>
<br>
    
    <button id="reset">重新开始一局游戏</button><br/>
    请输入要猜的数字：<input type="text" id="input"><button id="guess">猜</button><br/>
    已经猜的次数：<span id="count">0</span><br/>
    结果：<span id="result"></span><br/>
    
    <script src="JS/jquery-3.7.1.min.js"></script>
    <script>
        // 随机生成一个1-100之间的数字
        //Math.random()：返回一个0到1之间的随机数，不包括1。[0,1)
        //Math.random() * 100：返回一个0到100之间的随机数，不包括100。[0,100)
        //Math.floor()：返回一个整数，向下取整。
        //Math.floor(Math.random() * 100)：返回一个0到99之间的随机整数，包括0，99。[0,99]
        //Math.floor(Math.random() * 100) + 1：返回一个1到100之间的随机整数，包括1，100。[1,100]
        var randomNum = Math.floor(Math.random() * 100) + 1;
        var count = 0;//记录猜的次数
        //点击猜，需要判断输入的数字是否正确
        //猜按钮设置
        $(function(){
            $("#guess").click(function(){
                //每次点击猜，猜的次数加1
                count++;
                //显示猜的次数
                $("#count").text(count);
                
                //获取输入的数字
                var inputNum = $("#input").val();
                //判断输入的数字是否正确
                if(inputNum > randomNum){
                    $("#result").text("你猜的数字太大了"); 
                    $("#result").css("color","red");
                }
                else if(inputNum < randomNum){
                    $("#result").text("你猜的数字太小了");
                    $("#result").css("color","red");
                } 
                else{
                    $("#result").text("恭喜你，猜对了"); 
                    $("#result").css("color","blue");
                }
                
            })
        })
        //重置按钮
        $(function(){
            $("#reset").click(function(){
                //重置随机数
                randomNum = Math.floor(Math.random() * 100) + 1;
                //重置猜的次数
                count = 0;
                //重置显示的次数
                $("#count").text(count);
                //重置显示的结果
                $("#result").text("");
                //重置输入框  
                $("#input").val("");
            })    
        })
    </script>
</body>
</html>